<template>
  <div class="order-container">
    <el-card class="box-card">
      <!-- 搜索区域 -->
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="订单号">
          <el-input v-model="searchForm.orderId" placeholder="请输入订单号" />
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态">
            <el-option label="待支付" value="PENDING" />
            <el-option label="已支付" value="PAID" />
            <el-option label="已发货" value="DELIVERED" />
            <el-option label="已完成" value="RECEIVED" />
            <el-option label="已取消" value="CANCELED" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 表格 -->
      <el-table :data="orderList" border style="width: 100%">
        <el-table-column type="index" label="序号" width="50" />
        <el-table-column prop="id" label="订单号" width="180" />
        <el-table-column prop="userId" label="用户ID" width="100" />
        <el-table-column prop="totalAmount" label="总金额" width="100">
          <template #default="{ row }">
            ￥{{ row.totalAmount }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="orderTime" label="下单时间" width="180" />
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleDetail(row)">详情</el-button>
            <el-button 
              v-if="row.status === 'PENDING'" 
              type="danger" 
              link 
              @click="handleCancel(row)"
            >取消</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="page"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const searchForm = ref({
  orderId: '',
  status: ''
})

const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
const orderList = ref([])

// 获取状态类型
const getStatusType = (status: string) => {
  const map: Record<string, string> = {
    'PENDING': 'warning',
    'PAID': 'success',
    'DELIVERED': 'info',
    'RECEIVED': 'success',
    'CANCELED': 'danger'
  }
  return map[status] || ''
}

// 获取状态文本
const getStatusText = (status: string) => {
  const map: Record<string, string> = {
    'PENDING': '待支付',
    'PAID': '已支付',
    'DELIVERED': '已发货',
    'RECEIVED': '已完成',
    'CANCELED': '已取消'
  }
  return map[status] || ''
}

// 搜索
const handleSearch = () => {
  // TODO: 实现搜索功能
}

// 重置搜索
const resetSearch = () => {
  searchForm.value = {
    orderId: '',
    status: ''
  }
}

// 查看详情
const handleDetail = (row: any) => {
  // TODO: 实现查看详情功能
}

// 取消订单
const handleCancel = (row: any) => {
  // TODO: 实现取消订单功能
}

// 分页相关
const handleSizeChange = () => {
  // TODO: 实现分页功能
}

const handleCurrentChange = () => {
  // TODO: 实现分页功能
}

onMounted(() => {
  // TODO: 获取订单列表
})
</script>

<style scoped lang="scss">
.order-container {
  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style> 